<template>
  <el-dialog title="修改标签" :visible.sync="hdialogForm">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="form.tagName" autocomplete="off" maxlength="16" onkeyup="this.value=this.value.replace(/[^\w[!@#.=_~+,./<>?:;'\\\$\%\^\&\*\(\)\-\|\[\]\{\}\{\}]/g,'');"></el-input>
        </el-form-item>
        <el-form-item label="学科" v-if="!queryID">
          <el-select style="width:100%;" v-model="form.subjectID" placeholder="请选择学科">
            <el-option v-for="item in subjectsList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hdialogForm = false">取 消</el-button>
        <el-button type="primary" @click="hAddtag()">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { update } from '@/api/hmmm/tags'
export default {
  name: 'edittagadd',
  props: {
    formData: {
      type: Object,
      required: true
    },
    queryID: {
      type: String,
      required: false
    },
    subjectsList: {
      type: Array,
      required: true
    }
  },
  watch: {
    formData: {
      deep: true, // deep 为true  意味着开启了深度监听 a对象里面任何数据变化都会触发handler函数,
      handler () {
        // handler是一个固定写法
        this.form.id = this.formData.id
        this.form.subjectID = this.formData.subjectID
        this.form.tagName = this.formData.tagName
      }
    }
  },
  data () {
    return {
      rules: {
        tagName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      hdialogForm: false,
      form: { // 可以侦听父组件传值太复杂了
        id: this.formData.id,
        subjectID: this.formData.subjectID,
        tagName: this.formData.tagName
      }
    }
  },
  methods: {
    dialogFormV () {
      this.hdialogForm = true
    },
    // 点击修改的确定按钮
    hAddtag () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await update(this.form)
          console.log(res)
          this.hdialogForm = false
          this.$emit('updata', 1)
        }
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
